<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'tabsTest.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="<%=path%>/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%=path%>/js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript"  src="<%=path%>/js/jquery-ui-1.10.3.custom.min.gaowei.js"></script>
    <script type="text/javascript">
    $(function()
    {
       var tabs = $("#tabs").tabs({
       beforeLoad:function(event,ui){
        ui.ajaxSettings.username = "foo";
        ui.ajaxSettings.password = "bar";
        ui.ajaxSettings.type = "POST";
        //ui.ajaxSettings.data =$.param({loginName:"gaowei",password:"12345678"});
        //ui.ajaxSettings.hasContent = true;
        ui.ajaxSettings.processData = 
        true;
        //ui.ajaxSettings.contentType = "application/x-www-form-urlencoded; charset=UTF-8";
        //ui.jqXHR.setRequestHeader( "Content-Type", ui.ajaxSettings.contentType );
      //   ui.ajaxSettings.url = "/PoliceProject/servlet/TestServlet?loginName=gaowei&password=1234";
       //alert("ui.Index"+ui.tab.index()+";url:"+ui.ajaxSettings.url);
       
       //ui.jqXHR.abort();
       ui.jqXHR.success(function(data){
       
          //alert("ok");
          alert(data);
       })
       {
       
       }
       }
       });
       // add a tab
        
       // tabs.find(".ui-tabs-nav").append( "<li><a href='/PoliceProject/jsp/singleUser/tabsTest.jsp#fragment5'>New Tab</a></li>");

       // $( "<li><a href='/remote/tab.html'>New Tab</a></li>" ).appendTo( ".ui-tabs-nav" );
       $("#add").click(function(){
         //var tabs = $("#tabs").tabs();
          tabs.find(".ui-tabs-nav").append( "<li><a href='/PoliceProject/jsp/singleUser/tabsTest.jsp#fragment5'>New Tab</a></li>" );
          tabs.append("<div id='fragment5'><p>hello</p></div>" );
           tabs.tabs("refresh");
        //$( "#tabs" ).tabs( "refresh" );
          
       });
      
        // add a content
      
    }
    );
    
    </script>
  </head>
  
  <body>
   <div id="tabs">

    <ul style="height: 1px;">

        <li><a href="<%=path%>/jsp/singleUser/tabsTest.jsp#fragment1"><span>One</span></a></li>

        <li><a href="<%=path%>/jsp/singleUser/tabsTest.jsp#fragment2"><span>Two</span></a></li>

        <li><a href="http://127.0.0.1:8080/PoliceProject/jsp/singleUser/dataImport.jsp"><span>Three</span></a></li>

    </ul>

    <div id="fragment1">1</div>
    <div id="fragment2">2</div>
    <div id="fragment3">3</div>
</div>
<input type="button" id="add" value="添加">
<script>

</script>
  </body>
</html>
